<link rel="stylesheet" media="screen" type="text/css" href="<?php echo bu("css/datepicker.css"); ?>" />
<script type="text/javascript" src="<?php echo bu("js/datepicker.js"); ?>"></script>
<script type="text/javascript" src="<?php echo bu("js/gen_validatorv4.js"); ?>"></script>
<script>
  var students = 0;
  var mentors = 0;
  
		$(function() {
      $( ".dpicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'd MM yy',
      });
    });
    
    function students_validation(){
      students = $('#student').val();
      var current = $('#table_student tbody tr').length;
      
      for(var a=current; a <= students; a++){
        // validation
        var tmp_name = 'student['+(a)+'][name]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'student['+(a)+'][address]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'student['+(a)+'][phone]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'student['+(a)+'][email]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence ); s1.add(Validate.Email)
        
        var tmp_name = 'student['+(a)+'][shirt_size]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'student['+(a)+'][parents_name]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
      }
    }
    
    function mentors_validation(){
      mentors = $('#mentor').val();
      var current = $('#table_mentor tbody tr').length;
      
      for(var a=current; a <= mentors; a++){
        // validation
        var tmp_name = 'mentor['+(a)+'][name]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'mentor['+(a)+'][address]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'mentor['+(a)+'][phone]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
        
        var tmp_name = 'mentor['+(a)+'][email]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence ); s1.add(Validate.Email)
        
        var tmp_name = 'mentor['+(a)+'][shirt_size]';
        var s1 = new LiveValidation(tmp_name); s1.add( Validate.Presence );
      }
    }
    
    $(document).ready(function(){
      
      students_validation();
      mentors_validation();
      
      $('#student').change(function(){
        students = $(this).val();
        var current = $('#table_student tbody tr').length;
        
        if(current < students){
          for(var a=current; a < students; a++){
            $('#table_student tbody tr:nth-last-child(1)').clone().appendTo('#table_student');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(1)').html(a+1);
            
            // change attributes
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(2) input').attr('name', 'student['+(a+1)+'][name]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(3) input').attr('name', 'student['+(a+1)+'][address]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(4) input').attr('name', 'student['+(a+1)+'][phone]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(5) input').attr('name', 'student['+(a+1)+'][email]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(6) input').attr('name', 'student['+(a+1)+'][shirt_size]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(7) input').attr('name', 'student['+(a+1)+'][parents_name]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(8) select').attr('name','student['+(a+1)+'][class_choice]').val('');
            
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(2) input').attr('id', 'student['+(a+1)+'][name]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(3) input').attr('id', 'student['+(a+1)+'][address]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(4) input').attr('id', 'student['+(a+1)+'][phone]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(5) input').attr('id', 'student['+(a+1)+'][email]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(6) input').attr('id', 'student['+(a+1)+'][shirt_size]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(7) input').attr('id', 'student['+(a+1)+'][parents_name]').val('');
            $('#table_student tbody tr:nth-last-child(1) td:nth-child(8) select').attr('id','student['+(a+1)+'][class_choice]').val('');
          }
        }else{
          for(var a=1; a<=current-students; a++){
            if(current>1){
              $('#table_student tbody tr:nth-last-child(1)').remove();
            }else{
              $('#table_student tbody tr:nth-last-child(1)').css('display', 'none');
            }
          }
        }
      
        students_validation();
      });
      
      $('#mentor').change(function(){
        mentors = $(this).val();
        var current = $('#table_mentor tbody tr').length;
        
        if(current < mentors){
          for(var a=current; a < mentors; a++){
            $('#table_mentor tbody tr:nth-last-child(1)').clone().appendTo('#table_mentor');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(1)').html(a+1);
            
            // change attributes
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(2) input').attr('name', 'mentor['+(a+1)+'][name]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(3) input').attr('name', 'mentor['+(a+1)+'][address]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(4) input').attr('name', 'mentor['+(a+1)+'][phone]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(5) input').attr('name', 'mentor['+(a+1)+'][email]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(6) input').attr('name', 'mentor['+(a+1)+'][shirt_size]').val('');
            
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(2) input').attr('id', 'mentor['+(a+1)+'][name]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(3) input').attr('id', 'mentor['+(a+1)+'][address]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(4) input').attr('id', 'mentor['+(a+1)+'][phone]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(5) input').attr('id', 'mentor['+(a+1)+'][email]').val('');
            $('#table_mentor tbody tr:nth-last-child(1) td:nth-child(6) input').attr('id', 'mentor['+(a+1)+'][shirt_size]').val('');
          }
        }else{
          for(var a=1; a<=current-mentors; a++){
            if(current>1){
              $('#table_mentor tbody tr:nth-last-child(1)').remove();
            }else{
              $('#table_mentor tbody tr:nth-last-child(1)').css('display', 'none');
            }
          }
        }
      
        mentors_validation();
      });
    });
</script>

<div class='mainContainer home'> <!-- Main div for the contain, behaves like a table-->
	<div><!-- Direct child of mainContainer, behaves like a table cell-->
		<?php // echo $this->renderPartial('/partials/_notifications'); ?>
		<h2 class='differentAlign'>SELC Registration Form</h2>
		<div class='spacer'>&nbsp;</div>
		<?php
      $form=$this->beginWidget('CActiveForm', array(
      'action' => bu('users/activities'),
      // 'enableClientValidation'=>true,
      'htmlOptions' => array(
        'name' => 'myForm',
        'id' => 'myForm',
      )
      ));
    ?>
      <?php echo $form->errorSummary($model); ?><br />

      <fieldset>
        <legend>Data Seminar / <i>Seminar Data</i></legend>
          <div class="field">
            <?php echo $form->labelEx($model,'city'); ?>
            <?php
                $array = array(
                  'Jakarta' => 'Jakarta',
                  'Surabaya' => 'Surabaya'
                );
            ?>
            <?php echo $form->dropDownList($model, 'city', $array); ?>
            <?php echo $form->error($model, 'city'); ?>
          </div>
          <div class="field">
            <?php echo $form->labelEx($model,'contact_via'); ?>
            <?php
                $array = array(
                  'Email' => 'Email',
                  'Telepon' => 'Telepon'
                );
            ?>
            <?php echo $form->dropDownList($model, 'contact_via', $array); ?>
            <?php echo $form->error($model, 'contact_via'); ?>
          </div>
      </fieldset>
      
      <fieldset>
        <legend>Data Institusi / <i>Institution Data</i></legend>
          <div class="field">
            <?php echo $form->labelEx($model,'institution_name'); ?>
            <?php echo $form->textField($model, 'institution_name', array('required' => 'true', 'class' => 'full')); ?>
            <?php echo $form->error($model, 'institution_name'); ?>
          </div>
          <div class="field">
            <?php echo $form->labelEx($model,'address'); ?>
            <?php echo $form->textField($model, 'address', array('required' => 'true', 'class' => 'full')); ?>
            <?php echo $form->error($model, 'address'); ?>
          </div>
          <div class="field">
            <?php echo $form->labelEx($model,'phone'); ?>
            <?php echo $form->textField($model, 'phone', array('required' => 'true', 'class' => 'full')); ?>
            <?php echo $form->error($model, 'phone'); ?>
          </div>
          <div class="field">
            <?php echo $form->labelEx($model,'fax'); ?>
            <?php echo $form->textField($model, 'fax', array('required' => 'true', 'class' => 'full')); ?>
            <?php echo $form->error($model, 'fax'); ?>
          </div>
      </fieldset>
      
      <fieldset class="seminar">
        <div>
          Mendaftarkan <input type="text" id="student" value='1' name='student' /> student (s) dan <input type="text" id="mentor" name='mentor' value='1' /> mentors (s)
        </div>
        
		<b>Student Registration Form</b>
        <table id="table_student" class="border" align="center">
          <thead>
          <tr>
            <td align="center">NO</td>
            <td align="center">NAMA / <i>NAME</i></td>
            <td align="center">ALAMAT / <i>ADDRESS</i></td>
            <td align="center">TELEPON / <i>PHONE</i></td>
            <td align="center">EMAIL</td>
            <td align="center">UKURAN KAOS / <i>T-SHIRT SIZE</i></td>
            <td align="center">NAMA ORANG TUA / <i>PARENTS NAME</i></td>
            <td align="center">LEVEL</td>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td><input type="text" id="student[1][name]" name="student[1][name]" /></td>
            <td><input type="text" id="student[1][address]" name="student[1][address]" /></td>
            <td><input type="text" id="student[1][phone]" name="student[1][phone]" /></td>
            <td><input type="text" id="student[1][email]" name="student[1][email]" /></td>
            <td><input type="text" id="student[1][shirt_size]" name="student[1][shirt_size]" /></td>
            <td><input type="text" id="student[1][parents_name]" name="student[1][parents_name]" /></td>
            <td>
              <select id="student[1][class_choice]" name="student[1][class_choice]">
                <option value="Level 1 Student">Level 1 Student</option>
                <option value="Level 2 Student">Level 2 Student</option>
                <option value="Level 3 Student">Level 3 Student</option>
                <option value="Level 4 Student">Level 4 Student</option>
                <option value="Level 4 Mentor">Level 4 Mentor</option>
              </select>
            </td>
          </tr>
          </tbody>
        </table>
        
		<b>Mentor Registration Form</b>
        <table id="table_mentor" class="border">
          <thead>
          <tr>
            <td>NO</td>
            <td>NAMA / <i>NAME</i></td>
            <td>ALAMAT / <i>ADDRESS</i></td>
            <td>TELEPON / <i>PHONE</i></td>
            <td>EMAIL</td>
            <td>UKURAN KAOS / <i>T-SHIRT SIZE</i></td>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td><input type="text" id="mentor[1][name]" name="mentor[1][name]" /></td>
            <td><input type="text" id="mentor[1][address]" name="mentor[1][address]" /></td>
            <td><input type="text" id="mentor[1][phone]" name="mentor[1][phone]" /></td>
            <td><input type="text" id="mentor[1][email]" name="mentor[1][email]" /></td>
            <td><input type="text" id="mentor[1][shirt_size]" name="mentor[1][shirt_size]" /></td>
          </tr>
          </tbody>
        </table>
      </fieldset>
      
      <fieldset>
        <legend>Please confirm captcha correctly</legend>
        <?php $form->widget('CCaptcha'); ?><br />
        <?php echo $form->textField($model, 'verifyCode'); ?>
        <?php echo $form->error($model, "verifyCode"); ?>
      </fieldset>

      <p>* is required</p>
			<input type='submit' value='Submit' />
			<input type='submit' value='Reset' />
		<?php $this->endWidget(); ?>
	</div>

    <div class='rightPane'>
		<h2 class='differentAlign'>Our <span class='differentHeading'>Contact</span></h2>
		<div class="contact">
			<h3>ACSI Head Quarters</h3>
      731 Chapel Hills Drive Colorado Springs<br />
      CO 80920.3949<br />
      Phone : +1.719.528.6906<br />
      Fax : +1.719.531.0631<br />
      Email : info@acsiglobal.org
		</div>
    <div class="contact">
			<h3>ACSI Indonesia</h3>
      Komplek Ruko Klampis Megah B-25<br />
      Jl. Klampis Madya Utara I/6<br />
      Surabaya - Jawa Timur 60117<br />
      Phone/Fax : +62.31-591.0897, 591.3068<br />
      Phone : +62.31-592.9902<br />
      Mobile : +62.31-8193.5548<br />
      Email : acsi-indonesia@acsi.or.id<br />
      http://acsiglobal.org; acsi.or.id
		</div>
    <div class="contact">
			<h3>Indonesia Representative Office</h3>
      <b>Jakarta</b><br />
      Jl. Kwitang Raya No. 4, 3rd Floor<br />
      Senen - Jakarta Pusat 10420<br />
      Phone/Fax : +62.21-391.1207<br />
      Mobile : +62.31-3631-8020<br />
      Email : acsi-jakarta@acsi.or.id
		</div>
	</div>
</div>

<div class='spacer'>&nbsp;</div>